<template>
	<view>
		<image :src="list[type].background" class="mtBj" mode="scaleToFill"></image>
		<view class="container">
			<image src="../../static/index/containerBj.png" class="containerBj"></image>
			<view class="containerMessage">
				<view class="flex flowBox">
					<view>
						<image :src="list[type].flowList[0]" class="flowIcon"></image>
						<view>先领券</view>
					</view>
					<image :src="list[type].arrows" class="yellowArrows"></image>
					<view>
						<image :src="list[type].flowList[1]" class="flowIcon"></image>
						<view>{{type>1?'再打车':'再点餐'}}</view>
					</view>
					<image :src="list[type].arrows" class="yellowArrows"></image>
					<view>
						<image :src="list[type].flowList[2]" class="flowIcon"></image>
						<view>享优惠</view>
					</view>
				</view>
				<view class="border" :style="{borderBottom:' 2rpx dashed '+list[type].btnBackground}"></view>
				<image v-if="type==2" :src="list[type].logo" class="taxiMascot"></image>
				<image v-else :src="list[type].logo" class="mtMascot"></image>
				<view class="neckBtn" :style="{background:list[type].btnBackground}" @click="navWX">
					{{list[type].btnText}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					background: 'https://gfgn.oss-cn-beijing.aliyuncs.com/temp/mtBj_1731650710581.png',
					flowList: [
						'../../static/index/yellowCoupon.png',
						'../../static/index/yellowOrdering.png',
						'../../static/index/yellowDiscounts.png'
					],
					arrows: '../../static/index/yellowArrows.png',
					btnBackground: '#fdcc45',
					logo: 'https://gfgn.oss-cn-beijing.aliyuncs.com/temp/mtMascot_1731650678933.png',
					btnText: '领外卖红包',
				}, {
					background: 'https://gfgn.oss-cn-beijing.aliyuncs.com/temp/elmBj_1731650104998.png',
					flowList: [
						'../../static/index/blueCoupon.png',
						'../../static/index/blueOrdering.png',
						'../../static/index/blueDiscounts.png'
					],
					arrows: '../../static/index/blueArrows.png',
					btnBackground: '#0097FE',
					logo: '../../static/index/elmMascot.png',
					btnText: '领外卖红包',
				}, {
					background: '../../static/index/taxiBj.png',
					flowList: [
						'../../static/index/yellowCoupon.png',
						'../../static/index/yellowTaxi.png',
						'../../static/index/yellowDiscounts.png'
					],
					arrows: '../../static/index/yellowArrows.png',
					btnBackground: '#FDCC45',
					logo: '../../static/index/taxiMascot.png',
					btnText: '领打车红包',
				}],
				type: 2
			}
		},
		onLoad(option) {
			this.type = option.type
			if (this.type != 0) {
				uni.setNavigationBarTitle({
					title: this.type == 1 ? '饿了么红包' : '加油洗车'
				})
			}
		},
		methods: {
			navWX() {
				if (this.type == 1) { //饿了么
					uni.navigateToMiniProgram({
						appId: 'wxece3a9a4c82f58c9',
						path: 'ele-recommend-price/pages/guest/index?inviterId=782101a9&chInfo=ch_wechat_chsub_CopyLink&_ltracker_f=tjyj1_wx_fuceng',
						envVersion: "release",
						success: res => {
							// 打开成功
							console.log("打开成功", res);
						},
						fail: err => {
							console.log(err);
						}
					})
				} else {
					uni.navigateToMiniProgram({
						appId: 'wxde8ac0a21135c07d',
						path: 'waimai-mt/pages/web-view/web-view.html?redirectUrl=https%3A%2F%2Fmarket.waimai.meituan.com%2Fgd2%2Fwm%2F3oMg3O%3Fel_biz%3Dwaimai%26el_page%3Dgundam.loader%26gundam_id%3D3oMg3O%26tenant%3Dgundam%26pageSource%3D301%26resource_id%3D40422%26kingkong_channel_mark%3Dgourmet_food%26wm_dtype%3DM2012K11AC%26open_id%3DoJVP50FfRsE07EbKpT0dnT9We5_s%26user_id%3D2938655894%26token%3DAgFvIujjl1lSVR9nZBt1MEkqkITTF7ydEzZBNZjUScE4nXyhBetbbm3PRnWueTOrYlKoNkUslNh0wAAAAABMJAAA2ItIwYeMp1mJczHPzQbKioFadJUBsOJpAnHzsZm2IcgelzefD6vOTsoxN4tD6-aT%26latitude%3D33268292%26longitude%3D113029472&wxapp_force_loc=1',
						envVersion: "release",
						success: res => {
							// 打开成功
							console.log("打开成功", res);
						},
						fail: err => {
							console.log(err);
						}
					})
				}
			},
		}
	}
</script>

<style scoped>
	.mtMascot {
		width: 328rpx;
		height: 360rpx;
		margin: 52rpx 162rpx 42rpx;
	}

	.taxiMascot {
		width: 454rpx;
		height: 334rpx;
		margin: 52rpx 118rpx 38rpx;
	}

	.flowBox {
		align-items: center;
		justify-content: space-around;
		padding: 78rpx 67rpx 24rpx 67rpx;
	}

	.yellowArrows {
		width: 60rpx;
		height: 32rpx;
		margin-top: -60rpx;
	}

	.flowIcon {
		width: 92rpx;
		height: 92rpx;
	}

	.neckBtn {
		width: 472rpx;
		height: 84rpx;
		border-radius: 228rpx;
		/* background: #fdcc45; */
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 84rpx;
		text-align: center;
		margin-left: 102rpx;
	}

	.container {
		position: absolute;
		top: 22vh;
		left: 40rpx;
		/* top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto; */
		width: 674rpx;
		height: 850rpx;
		opacity: 1;
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.containerBj {
		width: 674rpx;
		height: 850rpx;
	}

	.border {
		width: 622rpx;
		height: 2rpx;
		margin-left: 26rpx;
	}

	.containerMessage {
		position: absolute;
		top: 0;
		left: 0;
		width: 674rpx;
		height: 850rpx;
	}

	.mtBj {
		width: 750rpx;
		height: 100vh;
	}
</style>
<style>
	page {
		background: #f5f5f5;
	}
</style>